@charset "utf-8";
@import "common";
.indexWeb{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: url(../img/beijing.png) left top/ cover;
    .tubiao{
        margin-top: r(23);
        margin-left: r(19);
        width: r(65);
        height: r(65);
        img{
           height: 100%;
        }
    }
    .bibang{
        position: absolute;
        left: r(97);
        top: r(38);
        width: r(179);
        img{    
            width: 100%;
        }
    }
    .zhongxin{
        width: r(123);
        height: r(116);
        margin: 0 auto;
        
        transition: all 1s ease-in-out;
        animation:zhongxin 1.5s infinite;
        img{
            height: 100%;
        }
    }
    .shu{
        height: r(583);
        width:r(320) ;
        margin: 0 auto;
        margin-top: r(-20);
        img{
            height: 100%;
        }
    }
    .shuiguo{
        height: r(355);
        width: r(552);
        margin: 0 auto;
        margin-top: r(-250);
        animation:shuiguo 1s infinite;
        img{
            width: 100%;
        }
    }
    .zhongjiang{
        position: absolute;
        bottom: r(150);
        left: 50%;
        transform: translateX(-50%);
        animation:rubberBand 0.9s infinite;
        width: r(490);
        height: r(267);
        img{
            width: 100%;
        }
    }
    .hengsan{
        position: absolute;
        z-index: -10;
        left: 50%;
        transform: translateX(-50%);
        height: r(102);
        width: r(553);
        bottom: r(133);
        img{
            height: 100%
        }
    }
    .banyuan{
        position: relative;
        width: r(316);
        height: r(316);
        margin: 0 auto;
        color: white;
        p{
            position: absolute;
            width: 100%;
            top: r(60);
            height: r(116);
            text-align: center;
            
        }
        img{
            width: 100%;
        }
    }
    .star{
        &>div{
            position: absolute;
            height:7.18% ;
            img{
                height:100% ;
            }
        }
        .star1{
            top: 15.7%;
            left: 8.59%;
            animation: star 2s infinite linear;
        }
        .star2{
            top: 26.01%;
            right: 6.72%;
            animation: star 2s infinite linear;
            animation-delay: .5s;
        }
        .star3{
            top: 29.67%;
            left: 19.22%;
            animation: star 2s infinite linear;
            animation-delay: 1s;
        }
        .star4{
            top: 47.2%;
            left: 4.69%;
            animation: star 2s infinite linear;
            animation-delay: 1.5s;
        }
    }
}
@keyframes zhongxin{
    0%{
        transform: rotate(0) translateY(-150%);
    }
    25%{
        transform: rotate(0) translateY(-100%);
    }
    40%{
        transform: rotate(0) translateY(0);
    }
    75%{
        transform: rotateY(180deg);
    }
    100%{
         transform: rotateY(360deg);
    }
}
@keyframes shuiguo {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: .8;
  }
}

@keyframes rubberBand {
  from {
    transform: translateX(-50%) perspective(400px) rotate3d(0, 1, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    transform: translateX(-50%) perspective(400px) rotate3d(0, 1, 0, -20deg);
    animation-timing-function: ease-in;
  }

  60% {
    transform: translateX(-50%) perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    transform: translateX(-50%) perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    transform: translateX(-50%) perspective(400px);
  }
}
@keyframes star{
    0%{
        transform: scale(1);
        opacity: 1;
    }
    50%{
        transform: scale(0);
        opacity: 0;
    }
    100%{
        transform: scale(1);
        opacity: 1;
    }
}
